<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>student</title>
    <link rel="stylesheet" href="/css/reset.css">
    <style>
        body {
            margin: 0;
        }

        .bc {
            background-image: url("../img/preview.jpg");
            background-size: 100% 100%;
            height: 100%;
            width: 100%;
        }

        .studentTable {
            border: 1px solid black;
            width: 90%;
            height: 300px;
            margin: auto;
            border-collapse: collapse;
            background-color: rgba(236, 231, 231, 0.6);
            text-align: center;
        }

        .item {
            display: flex;
            margin-left: 200px;
            margin-top: 10px;
            /*margin-bottom: 40px;*/
            padding-bottom: 40px;
        }

        .itemLeft {
            margin-left: 150px;
            line-height: 40px;
            width: 400px;
            height: 200px;
            padding: 20px;
            box-sizing: border-box;

            text-align: center;
            background-color: rgba(204, 204, 204, 0.6);
            box-shadow: 0px 0px 3px 3px rgb(16, 195, 183);
            border-radius: 15px;
            /* text-align:end; */
        }

        .itemLeft {
            text-align: end;


        }

        .classtext {
            margin-left: 34px;
            width: 170px;
        }

    </style>
    <script src="/studenthtml/js/student.js"></script>

</head>

<body>
<div class="bc">
    <div>
        <table class="studentTable" border="1" style="border: 1px solid black">
            <thead>
            <tr style="line-height: 20px;font-size: 20px;padding-bottom: 10px">
                <th>学生姓名</th>
                <th>性别</th>
                <th>班级</th>
                <th>所在房间</th>
                <th>联系电话</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="data">
            </tbody>
        </table>
        <p style="color: white" id="cutA"></p>
    </div>
    <!-- 添加学生div -->
    <div id="addStudentDiv"
         style="background-color: slateblue;border-radius: 20px;visibility: hidden;font-size: 20px;color: cyan;font-weight: bold;width: 700px;height: 400px;position:absolute;top: 50px;left: 50px;text-align: justify;padding: 20px">
        <h6 style="border: 1px solid black;margin: 0;text-align: center">添加学生</h6>
        <div style="display: flex;justify-content: space-between; line-height: 50px;margin-top: 20px">
            <div>
                <input type="hidden" id="studentIdText">
                <p> 姓名：<input type="text" id="studentName"></p>
                <p> 性别：<select id="genderSelect" style="width: 80px"
                               onchange="findBygender(this.value,'roomSelect')">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select></p>
                <p> 房间：<select id="roomSelect"> </select></p>
                <p> 班级：<select id="classSelect"> </select></p>
            </div>
            <div>
                <img src="" id="faceImg" width="150" height="150">
                <input type="file" id="fileText" onchange="fileChange()"><br>

                联系电话：<input type="text" id="phoneText"> <br>

                <input type="button" value="添加" onclick="addStudent();">
                <input type="button" value="返回" onclick="closeDiv('addStudentDiv')">
            </div>
        </div>
    </div>
    <div id="showInfoDiv"
         style="width: 260px;height: 100px ;background-color: whitesmoke;text-align:center;line-height: 50px;
   border: 2px solid black;visibility: hidden;box-shadow: 1px 1px 3px 2px black;font-size: 16px;font-weight: bold;position: absolute;; left: 25%;top: 20%;z-index: 55;">
        <p id="showInfo"> </p>
        <input type="button" value="确认" onclick="closeDiv('showInfoDiv')">
    </div>

    <!--    修改信息Div-->
    <div id="updateStudentRoomDiv"
         style="background-color: slateblue;border-radius: 20px;visibility: hidden;font-size: 20px;color: cyan;font-weight: bold;width: 700px;height: 400px;position:absolute;top: 50px;left: 50px;text-align: justify;padding: 20px">
        <h6 style="border: 1px solid black;margin: 0;text-align: center">修改房间</h6>
        <div style="display: flex;justify-content: space-between; line-height: 50px;margin-top: 20px">
            <div>
                <p> 姓名：<span id="upNameSpan"></span></p>
                <p> 性别：<span id="upGenderSpan"></span></p>
                <p> 新房建房间：<select id="upRoomSelect"> </select></p>
                <p> 班级：<span id="upClassSpan"></span></p>
                <p> 电话：<span id="upPhoneSpan"></span></p>
            </div>
            <div>
                <img src="" id="upImg" width="150" > <br>

                <input type="button" value="修改" style="margin-top: 20px" onclick="updateStudent(); ">
                <input type="button" value="返回" onclick="closeDiv('updateStudentRoomDiv')">
            </div>
        </div>
    </div>
    <!--    修改信息Div-->
    <div id="findStudentDiv"
         style="background-color: slateblue;border-radius: 20px;visibility: hidden;font-size: 20px;color: cyan;font-weight: bold;width: 700px;height: 400px;position:absolute;top: 50px;left: 50px;text-align: justify;padding: 20px">
        <h6 style="border: 1px solid black;margin: 0;text-align: center">修改房间</h6>
        <div style="display: flex;justify-content: space-between; line-height: 50px;margin-top: 20px">
            <div>
                <p> 姓名：<span id="fNameSpan"></span></p>
                <p> 性别：<span id="fGenderSpan"></span></p>
                <p> 房间：<span id="fRoomSpan"></span></p>
                <p> 班级：<span id="fClassSpan"></span></p>
                <p> 入住时间：<span id="fTimeSpan"></span></p>
                <p> 联系电话：<span id="fPhoneSpan"></span></p>
            </div>
            <div>
                <img src="" id="fImg" width="150" > <br>

                <input type="button" value="返回" onclick="closeDiv('findStudentDiv')">
            </div>
        </div>
    </div>

    <div class="item">
        <!-- 入住按钮 -->
        <div>
            <button onclick="showAddDiv();">学生入住</button>
        </div>
        <!-- 查询 -->
        <div class="itemLeft">
            学生姓名： <input type="text" id="nameText"> <br>

            班 级 : <select id="classText" class="classtext">

        </select> <br>
            所在房间： <input type="text" id="homeText"> <br>
            <button onclick="showInfo(1)">查找</button>

        </div>
    </div>
</div>
</body>
<script src="/js/axios.min.js"></script>
<script src="/js/query.js"></script>
<script src="/studenthtml/js/student.js"></script>

</html>